<template>
  <view>
    <!-- 搜索框 -->
    <view class="my-search-container">
      <!-- 使用 view 组件模拟 input 输入框的样式 -->
      <view class="my-search-box">
        <uni-icons type="search" size="17"></uni-icons>
        <text class="placeholder">女靴</text>
      </view>
    </view>

    <view class="scroll-view-container">
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <view :class="{'left-scroll-view-item':true,'active':activeIndex===index}" v-for="(item,index) in cateList"
          :key="item.id" @click="changeActive(index)">{{item.name}}</view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scollTop">
        <!-- 轮播图 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
          :indicator-color="{color:'rgb(232,238,239,.3)'}">
          <swiper-item v-for="item in swiperList" :key="item.id">
            <view class="swiper-item">
              <image :src="item.imgUrl"></image>
            </view>
          </swiper-item>
        </swiper>
        <view class="left-scroll-view-item">
          <view class="cate-lv2" v-for="item in cateListChildren" :key="item.id">
            <!-- 二级-->
            <view class="rightbox-text">
              <view class="cate-lv2-title-left">{{item.name}}</view>
              <view class="cate-lv2-title-right">全部></view>
            </view>
            <!-- 三级写在二级里面 -->
            <view class="cate-lv3-list">
              <view class="cate-lv3-item" v-for="item2 in item.goods" :key="item2.id" @click="gotoGoodsDetail(item2)">
                <!-- 图片 -->
                <image :src="item2.picture"></image>
                <!-- 文本 -->
                <text class="up">{{item2.name}}</text>
                <text class="down">￥{{item2.price}}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
  import {
    getCategory,
    getSwiperList
  } from '@/api/category.js'
  export default {
    data() {
      return {
        wh: 0, //页面可用高度
        cateList: [], //接收接口数据
        activeIndex: 0, //默认页面打开高亮是第一个
        cateListChildren: [], //放二级内容
        scollTop: 0, //滚动条bug
        swiperList: [], //轮播图
      };
    },
    onLoad() {
      // 1.获取窗口信息
      const sysInfo = uni.getSystemInfoSync()
      // console.log(sysInfo);
      this.wh = sysInfo.windowHeight - 50
      this.getCateList()
      this.getSwiperList() //轮播
    },
    methods: {
      // 2.调取分类列表接口
      async getCateList() {
        const {
          result
        } = await getCategory()
        console.log(result);
        this.cateList = result
        // 5.页面打开刚调取接口的时候就默认第一个页面数据加载
        this.changeActive(0)
      },
      // 3.点击高亮
      changeActive(i) {
        this.activeIndex = i
        // 4.根据点击获取的索引渲染右侧页面 渲染二级类目
        this.cateListChildren = this.cateList[i].children
        this.scollTop = this.scollTop ? 0 : 1
      },
      // 5.轮播图
      async getSwiperList() {
        const {
          result
        } = await getSwiperList()
        // console.log(result);
        this.swiperList = result
      },
      // 跳转
      gotoGoodsDetail(item) {
        uni.navigateTo({
          url: "/subpkg/goods_detail/goods_detail?id=" + item.id
        })
      },
    },
  }
</script>

<style lang="scss">
  .scroll-view-container {
    display: flex;

    .left-scroll-view {
      height: 200rpx;
      width: 240rpx;
      background: #f2f2f2;

      .left-scroll-view-item {
        line-height: 100rpx;
        background-color: #f7f7f7;
        text-align: center;
        font-size: 24rpx;
        color: #777a80;

        // 激活项的样式
        &.active {
          background: #fff;
          position: relative;

          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 8rpx;
            height: 100%;
            background-color: #3cceaf;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }

  .rightbox-text {
    overflow: hidden;
    // margin-bottom: 10px;
    margin: 0px 40rpx 20rpx 40rpx;
  }

  .cate-lv2 {
    margin-bottom: 60rpx;
  }

  .cate-lv2-title-left {
    float: left;
    font-size: 28rpx;
    color: #3d3d3d;
  }

  .cate-lv2-title-right {
    float: right;
    color: #999999;
    font-size: 24rpx;
  }



  .cate-lv3-list {
    display: flex;
    flex-wrap: wrap;

    .cate-lv3-item {
      width: 33.33%;
      // margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 120rpx;
        height: 120rpx;
      }

      .up {
        width: 120rpx;
        height: 60rpx;
        font-size: 24rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .down {
        width: 120rpx;
        height: 60rpx;
        font-size: 24rpx;
        color: red;
      }
    }
  }

  // 搜索框
  .my-search-container {
    background-color: #ffffff;
    height: 100rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    // 固定搜索框在顶部
    position: sticky; //粘性定位（固定顶部搜索框盒子）看mdn文档
    top: 0; //必须给top 以及层级
    z-index: 999;
  }

  .my-search-box {
    height: 72rpx;
    background-color: #f2f2f2;
    border-radius: 30rpx;
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;
    padding-left: 20rpx;
    color: #8b8b8b;

    .placeholder {
      font-size: 26rpx;
      margin-left: 10rpx;
    }
  }

  // 轮播图
  swiper {
    height: 200rpx;
    margin: 0rpx 40rpx 40rpx 40rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  /* 修改dot形状 */
  swiper .wx-swiper-dots .wx-swiper-dot {
    width: 40rpx;
    height: 6rpx;
    border-radius: 4rpx;
  }

  /* 修改dot之间的间距 */
  swiper .wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2) {
    margin-left: 8rpx;
  }
</style>